import { Panel, LayerLink } from 'comps/common';
import { Form, Row, Col, Tag } from 'antd';
import MachineDetail from '../containers/machine-detail.jsx';
import ApplicationDetail from '../containers/application-detail.jsx';
import ProviderList from '../containers/provider-list.jsx';
import ConsumerList from '../containers/consumer-list.jsx';
import * as React from 'react';

const FormItem = Form.Item;

const ServiceDetailInfoPanel = ({service}) => {
  const {applications= [], machines= []} = service;

  const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  return (
    <Panel title="基本信息">
      <Form className="service-search-form" horizontal>
        <Row>
          <Col span="12">
            <FormItem label="服务名： " {...formItemLayout}>
              <span>{service.id}</span>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="应用名： " {...formItemLayout}>
              {applications.map(app => (
                <Tag color="blue" key={app}>
                  <LayerLink component={ApplicationDetail} data={{application:app}}>{app}</LayerLink>
                </Tag>
              ))}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="服务状态： " {...formItemLayout}>
                  <span
                    className={{OK:"color-success",NO_PROVIDER:"color-danger",NO_CONSUMER:"color-warning"}[service.status]}>
                    {{ OK: '正常', NO_PROVIDER: '无提供者', NO_CONSUMER: '无消费者' }[service.status]}
                  </span>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="所在机器： " {...formItemLayout}>
              {machines.map(machine => (
                <Tag color="blue" key={machine}>
                  <LayerLink component={MachineDetail} data={{machine:machine}}>{machine}</LayerLink>
                </Tag>
              ))}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="提供者： " {...formItemLayout}>
              <span>{service.providersNum}个</span>
              {service.providersNum > 0 ?
                <LayerLink component={ProviderList} data={{serviceId: service.id}}>查看</LayerLink> : ''}
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="消费者： " {...formItemLayout}>
              <span>{service.consumerNum}个</span>
              {service.consumerNum > 0 ?
                <LayerLink component={ConsumerList} data={{serviceId:service.id}}>查看</LayerLink> : ''}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Panel>
  )
}

export default ServiceDetailInfoPanel;
